<template>
    <div class="rongqi">
        <header class="header">
            <div class="head">
                <div class="left">
                    <span class="iconfont icon-weibiaoti104"></span>
                    <p>东城区北京市政府</p>
                </div>
                <div class="right">
                    <h5>
                    <span>-1°</span>
                    <span>晴天</span>
                    </h5>
                    <p class="iconfont icon-taiyang"></p>
                </div>
            </div>        
        </header>
        <div class="cent" id="_cent">
               <input type="text" placeholder="搜索商家、商品名称">
        </div>
        <div class="botm">
                <swiper class="sw1" :options="swiperOption" ref="mySwiper">
                    <swiper-slide class="sey">炸鸡</swiper-slide>
                    <swiper-slide class="sey">必胜客</swiper-slide>
                    <swiper-slide class="sey">奶茶</swiper-slide>
                    <swiper-slide class="sey">水果39减20</swiper-slide>
                    <swiper-slide class="sey">真功夫</swiper-slide>
                    <swiper-slide class="sey">披萨</swiper-slide>
                    <swiper-slide class="sey">麦当劳</swiper-slide>
                    <swiper-slide class="sey">沙拉</swiper-slide>
                    <swiper-slide class="sey">熊包</swiper-slide>
                    <swiper-slide class="sey">蛋糕</swiper-slide>
                </swiper>
            </div>
        <section class="contet">
            <swiper :options="swiperOption1" ref="mySwiper" class="chajian">
                <swiper-slide v-for='(v,i) in list' :key='i' class="asdd">
                    <dl v-for='(b,c) in v.as' :key='c'>
                        <dt><img :src="b.imgUrl"></dt>
                        <dd>{{b.title}}</dd>
                    </dl>
                </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
        </section>
        <figure class="tupian">
            <img src="https://fuss10.elemecdn.com/3/c8/45b2ec2855ed55d90c45bf9b07abbpng.png?imageMogr/format/webp/thumbnail/!710x178r/gravity/Center/crop/710x178/">
        </figure> 
        <section class="wenzi">
             <p></p>
             <h3>推荐商家</h3>
        </section>
        <article class="wentu">
            <section class="shuju">
            <div class="shuju-left">
                <img src="//fuss10.elemecdn.com/1/32/c75a72f674052473fb35b5c8ab1d7jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="">
            </div>
            <router-link class="shuju-right" tag="tiao" to="/list">
                <h2><span>品牌</span>北京麦当劳祈年大街餐厅</h2>
                <p>月销1563单</p>
                <div class="zhong">
                    <p>￥0起送丨￥配送费</p>
                    <p>1.1km丨33分钟</p>
                </div>
                    <div class="te">
                        <p><span>特</span>【专享玩具套餐】美味亦是正义</p>
                    </div>
                    <div class="te">
                        <p><span>特</span>【立减22元】麦麦早餐❀家庭餐</p>
                    </div>
            </router-link>

            </section>
            <section class="shuju">
            <div class="shuju-left">
                <img src="//fuss10.elemecdn.com/d/a4/b973c64c6a7fd1029a4feaeca6a17jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="">
            </div>
             <router-link class="shuju-right" tag="tiao" to="/caipu">
                <h2><span>品牌</span>北京麦当劳祈年大街餐厅</h2>
                <p>月销1563单</p>
                <div class="zhong">
                    <p>￥0起送丨￥配送费</p>
                    <p>1.1km丨33分钟</p>
                </div>
                    <div class="te">
                        <p><span>特</span>【专享玩具套餐】美味亦是正义</p>
                    </div>
                    <div class="te">
                        <p><span>特</span>【立减22元】麦麦早餐❀家庭餐</p>
                    </div>
            </router-link>   
            </section> 

            <section class="shuju">
            <div class="shuju-left">
                <img src="//fuss10.elemecdn.com/f/fc/240e22e7311dc388f7dddaf9aae23jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="">
            </div>
            <div class="shuju-right">
                <h2><span>品牌</span>北京麦当劳祈年大街餐厅</h2>
                <p>月销1563单</p>
                <div class="zhong">
                    <p>￥0起送丨￥配送费</p>
                    <p>1.1km丨33分钟</p>
                </div>
                    <div class="te">
                        <p><span>特</span>【专享玩具套餐】美味亦是正义</p>
                    </div>
                    <div class="te">
                        <p><span>特</span>【立减22元】麦麦早餐❀家庭餐</p>
                    </div>
            </div>        
            </section>

            <section class="shuju">
            <div class="shuju-left">
                <img src="//fuss10.elemecdn.com/f/7e/c52dbbed26f55cfc45f335584ad1ajpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="">
            </div>
            <div class="shuju-right">
                <h2><span>品牌</span>北京麦当劳祈年大街餐厅</h2>
                <p>月销1563单</p>
                <div class="zhong">
                    <p>￥0起送丨￥配送费</p>
                    <p>1.1km丨33分钟</p>
                </div>
                    <div class="te">
                        <p><span>特</span>【专享玩具套餐】美味亦是正义</p>
                    </div>
                    <div class="te">
                        <p><span>特</span>【立减22元】麦麦早餐❀家庭餐</p>
                    </div>
            </div>         
            </section> 
            
            <section class="shuju">
            <div class="shuju-left">
                <img src="//fuss10.elemecdn.com/a/2a/5fd158b2803f19742462cd5b786afjpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="">
            </div>
            <div class="shuju-right">
                <h2><span>品牌</span>北京麦当劳祈年大街餐厅</h2>
                <p>月销1563单</p>
                <div class="zhong">
                    <p>￥0起送丨￥配送费</p>
                    <p>1.1km丨33分钟</p>
                </div>
                    <div class="te">
                        <p><span>特</span>【专享玩具套餐】美味亦是正义</p>
                    </div>
                    <div class="te">
                        <p><span>特</span>【立减22元】麦麦早餐❀家庭餐</p>
                    </div>
            </div>      
            </section> 

            <section class="shuju">
            <div class="shuju-left">
                <img src="//fuss10.elemecdn.com/a/61/f6fc123bfd1bf2de30bb2866bab32jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="">
            </div>
            <div class="shuju-right">
                <h2><span>品牌</span>北京麦当劳祈年大街餐厅</h2>
                <p>月销1563单</p>
                <div class="zhong">
                    <p>￥0起送丨￥配送费</p>
                    <p>1.1km丨33分钟</p>
                </div>
                    <div class="te">
                        <p><span>特</span>【专享玩具套餐】美味亦是正义</p>
                    </div>
                    <div class="te">
                        <p><span>特</span>【立减22元】麦麦早餐❀家庭餐</p>
                    </div>
            </div>       
            </section> 

            <section class="shuju">
            <div class="shuju-left">
                <img src="//fuss10.elemecdn.com/b/a5/2bfc1e15ffa5e3adf471bef84a7d8jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="">
            </div>
            <div class="shuju-right">
                <h2><span>品牌</span>北京麦当劳祈年大街餐厅</h2>
                <p>月销1563单</p>
                <div class="zhong">
                    <p>￥0起送丨￥配送费</p>
                    <p>1.1km丨33分钟</p>
                </div>
                    <div class="te">
                        <p><span>特</span>【专享玩具套餐】美味亦是正义</p>
                    </div>
                    <div class="te">
                        <p><span>特</span>【立减22元】麦麦早餐❀家庭餐</p>
                    </div>
            </div>      
            </section> 

            <section class="shuju">
            <div class="shuju-left">
                <img src="//fuss10.elemecdn.com/b/e6/63db71745c0d92631178049bbb9a2jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="">
            </div>
            <div class="shuju-right">
                <h2><span>品牌</span>北京麦当劳祈年大街餐厅</h2>
                <p>月销1563单</p>
                <div class="zhong">
                    <p>￥0起送丨￥配送费</p>
                    <p>1.1km丨33分钟</p>
                </div>
                    <div class="te">
                        <p><span>特</span>【专享玩具套餐】美味亦是正义</p>
                    </div>
                    <div class="te">
                        <p><span>特</span>【立减22元】麦麦早餐❀家庭餐</p>
                    </div>
            </div>   
            </section>
        </article>   
    </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          as: [
            {
              title: "美食",
              imgUrl:
                "//fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
            },
            {
              title: "晚餐",
              imgUrl:
                "//fuss10.elemecdn.com/9/21/60ac33f023d9074e13cd78f9b5964jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
            },
            {
              title: "超级遍历",
              imgUrl:
                "//fuss10.elemecdn.com/c/3c/0184f5b3fa72f295fc01864734218jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
            },
            {
              title: "果蔬生鲜",
              imgUrl:
                "//fuss10.elemecdn.com/c/db/d20d49e5029281b9b73db1c5ec6f9jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
            },
            {
              title: "炸鸡炸串",
              imgUrl:
                "//fuss10.elemecdn.com/1/a5/b4aa9dd27ff21d0a76bb0da550fd7jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
            },
            {
              title: "大牌5折",
              imgUrl:
                "//fuss10.elemecdn.com/6/74/785eafaf358fa6b18df37c64c3510jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
            },
            {
              title: "甜品饮品",
              imgUrl:
                "//fuss10.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
            },
            {
              title: "医药健康",
              imgUrl:
                "//fuss10.elemecdn.com/b/e1/58aa34ef194d216c9f2328f603588jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
            }
          ]
        },
        {
          as: [
            {
              title: "浪漫鲜花",
              imgUrl:
                "//fuss10.elemecdn.com/3/01/c888acb2c8ba9e0c813f36ec9e90ajpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
            },
            {
              title: "麻辣烫",
              imgUrl:
                "//fuss10.elemecdn.com/3/c7/a9ef469a12e7a596b559145b87f09jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
            },
            {
              title: "地方菜系",
              imgUrl:
                "//fuss10.elemecdn.com/7/43/0947110c24c620a767745054d798bjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
            },
            {
              title: "披萨惠面",
              imgUrl:
                "//fuss10.elemecdn.com/7/b6/235761e50d391445f021922b71789jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
            },
            {
              title: "新店特惠",
              imgUrl:
                "//fuss10.elemecdn.com/a/fa/d41b04d520d445dc5de42dae9a384jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
            },
            {
              title: "快餐便当",
              imgUrl:
                "//fuss10.elemecdn.com/9/3f/cd951a6dbc7ecc5b12e24e9f8a124jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
            }
          ]
        }
      ],
      swiperOption1: {
        loop: true,
        pagination: {
          el: ".swiper-pagination"
        }
      },
      swiperOption: {
        slidesPerView: 5,
        pagination: {
          el: ".tab-nav"
        }
      },
    //   scroll: "cent"
    };
  },
//   mounted() {
//     window.addEventlistener("scroll", this.ming);
//   },
//   methods: {
    //   ming() {
    //       var scrollTop = window.pageYOffset && document.documentElement.scrollTop && document.body.scrollTop
    //     // console.log(scrollTop)
    //       var offsetTop = document.getElementById('#_cent').offsetTop
    //       if(scrollTop > offsetTop){
    //          this.scroll = 'cent-1'
    //       }else{
    //           this.scroll = 'cent'
    //       }
    //   }
 // }
};
</script>

<style scoped lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
.rongqi {
  .header {
    background: #3366ff;
    .head {
      width: 100%;
      .px2rem(height,90);
      display: flex;
      .left {
        width: 80%;
        .px2rem(height,90);
        display: flex;
        align-items: center;
        span {
          .px2rem(font-size,40);
          color: #fff;
          .px2rem(padding-left,20);
          box-sizing: border-box;
        }
        p {
          .px2rem(font-size,42);
          font-weight: bold;
          color: #fff;
        }
      }
      .right {
        width: 20%;
        .px2rem(height,90);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        h5 {
          display: flex;
          flex-direction: column;
          span {
            .px2rem(font-size,34);
          }
        }
        p {
          .px2rem(font-size,44);
          font-weight: bold;
        }
      }
    }
  }
  .cent {
    width: 100%;
    .px2rem(height,90);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #3366ff;
    border-bottom: 2px solid #99ccff;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    input {
      width: 90%;
      .px2rem(height,75);
      .px2rem(font-size,36);
      font-weight: bold;
      text-align: center;
      border: none;
    }
  }
//   .cent-1 {
//     width: 100%;
//     .px2rem(height,90);
//     //    background: #3366ff;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     border-bottom: 2px solid #99ccff;
//     //   position: fixed;
//     z-index: 100;
//     input {
//       width: 90%;
//       .px2rem(height,75);
//       .px2rem(font-size,36);
//       font-weight: bold;
//       text-align: center;
//       border: none;
//     }
//   }
  .botm {
    width: 100%;
    background: #3366ff;
    .px2rem(height,78);
    .sw1 {
      .sey {
        .px2rem(height,78);
        .px2rem(font-size,30);
        line-height: 2.5;
        text-align: center;
        color: #fff;
      }
    }
  }
  .contet {
    .chajian {
      width: 100%;
      .asdd {
        width: 100%;
        .px2rem(height,360);
        display: flex;
        flex-wrap: wrap;
        dl {
          width: 25%;
          .px2rem(height,180);
          text-align: center;
          dt {
            img {
              .px2rem(width,100);
              .px2rem(height,100);
            }
          }
          dd {
            .px2rem(font-size,36);
          }
        }
      }
    }
  }
  .tupian {
    width: 100%;
    .px2rem(height,180);
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 5px solid #ccc;
    img {
      width: 95%;
      height: 90%;
    }
  }
  .wenzi {
    width: 100%;
    .px2rem(height,100);
    position: relative;
    p {
      width: 25%;
      .px2rem(height,10);
      background: #ccc;
      position: absolute;
      top: 40px;
      left: 35%;
    }
    h3 {
      .px2rem(font-size,40);
      position: absolute;
      top: 25px;
      left: 37%;
      background: #fff;
    }
  }
  .wentu {
    width: 100%;
    .px2rem(padding-bottom,130);
    .shuju {
      width: 100%;
      .px2rem(height,300);
      display: flex;
      .px2rem(margin-top,30);
      .shuju-left {
        width: 30%;
        .px2rem(height,250);
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 85%;
          height: 95%;
        }
      }
      .shuju-right {
        width: 70%;
        .px2rem(height,300);
        display: flex;
        flex-wrap: wrap;
        h2 {
          width: 100%;
          .px2rem(font-size,36);
          font-weight: bold;
          span {
            background: #ffcc33;
            color: #cc6600;
          }
        }
        p {
          width: 100%;
          .px2rem(font-size,36);
          color: #003333;
          .px2rem(margin-top,15);
        }
        .zhong {
          width: 100%;
          .px2rem(height,70);
          border-bottom: 2px dotted #ccc;
          display: flex;
          justify-content: space-between;
          p {
            .px2rem(font-size,30);
            color: #003333;
            line-height: 1.2;
          }
        }
        .te {
          width: 100%;
          .px2rem(height,60);
          p {
            .px2rem(font-size,32);
            color: #003333;
            line-height: 1;
            span {
              background: #cc3300;
              color: #fff;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>
